<template>
  <teleport to="body">
    <el-dialog
        v-model="dialogVisible"
        :title="activityDetail?.title || '活动详情'"
        width="700px"
        :before-close="handleClose"
        class="activity-detail-dialog"
    >
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="6" animated />
      </div>

      <!-- 活动详情内容 -->
      <div v-else-if="activityDetail" class="activity-detail-content">
        <!-- 基本信息 -->
        <div class="detail-section">
          <h3 class="section-title">基本信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="活动名称">
              {{ activityDetail.title }}
            </el-descriptions-item>
            <el-descriptions-item label="活动地点">
              {{ activityDetail.address }}
            </el-descriptions-item>
            <el-descriptions-item label="活动基地">
              {{ activityDetail.baseName }}
            </el-descriptions-item>
            <el-descriptions-item label="面向对象">
              {{ activityDetail.targetAudience }}
            </el-descriptions-item>
            <el-descriptions-item label="费用类型">
              <el-tag :type="activityDetail.isFree ? 'success' : 'warning'">
                {{ activityDetail.isFree ? '免费' : '收费' }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 时间信息 -->
        <div class="detail-section">
          <h3 class="section-title">时间信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="活动周期">
              {{ activityDetail.startDate }} 至 {{ activityDetail.endDate }}
              <span class="total-days">(共{{ activityDetail.totalDays }}天)</span>
            </el-descriptions-item>
            <el-descriptions-item label="每日开始时间">
              {{ activityDetail.startTime || '未设置' }}
            </el-descriptions-item>
            <el-descriptions-item label="报名截止时间">
              {{ formatDateTime(activityDetail.registrationDeadline) }}
            </el-descriptions-item>
            <el-descriptions-item label="发布时间">
              {{ formatDateTime(activityDetail.publishTime) }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 参与信息 -->
        <div class="detail-section">
          <h3 class="section-title">参与信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="最大参与人数">
              {{ activityDetail.maxParticipants }}人
            </el-descriptions-item>
            <el-descriptions-item label="当前报名人数">
              {{ activityDetail.currentParticipants }}人
            </el-descriptions-item>
            <el-descriptions-item label="剩余名额">
              <el-tag :type="remainingSpots > 0 ? 'success' : 'danger'">
                {{ remainingSpots }}人
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 活动描述 -->
        <div class="detail-section">
          <h3 class="section-title">活动描述</h3>
          <div class="description-content">
            <p>{{ activityDetail.description || '暂无描述' }}</p>
          </div>
        </div>

        <!-- 创建人信息 -->
        <div class="detail-section">
          <h3 class="section-title">创建人信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="创建人">
              {{ activityDetail.creatorName }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话">
              {{ activityDetail.creatorPhone }}
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
              {{ activityDetail.creatorEmail }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button @click="handleClose">关闭</el-button>
        </div>
      </div>

      <!-- 错误状态 -->
      <div v-else class="error-container">
        <el-empty description="获取活动详情失败" />
      </div>
    </el-dialog>
  </teleport>

</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getActivityDetail } from '@/api/teacher'

// 定义Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  activityId: {
    type: Number,
    default: null
  }
})

// 定义Emits
const emit = defineEmits(['update:visible'])

// 响应式数据
const dialogVisible = ref(false)
const loading = ref(false)
const activityDetail = ref(null)

// 计算属性
const remainingSpots = computed(() => {
  if (!activityDetail.value) return 0
  return Math.max(0, activityDetail.value.maxParticipants - activityDetail.value.currentParticipants)
})

// 监听器
watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal
  if (newVal && props.activityId) {
    fetchActivityDetail()
  }
})

watch(dialogVisible, (newVal) => {
  emit('update:visible', newVal)
  if (!newVal) {
    // 关闭时重置数据
    activityDetail.value = null
  }
})

// 方法
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return '-'
  return dateTimeStr.replace('T', ' ')
}

const fetchActivityDetail = async () => {
  if (!props.activityId) return

  loading.value = true
  try {
    const response = await getActivityDetail(props.activityId)
    if (response.success) {
      console.log(response.data)
      activityDetail.value = response.data
    } else {
      ElMessage.error(response.message || '获取活动详情失败')
    }
  } catch (error) {
    console.error('获取活动详情失败:', error)
    ElMessage.error('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style scoped>
.activity-detail-dialog {
  :deep(.el-dialog__body) {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
  }
}

.detail-section {
  margin-bottom: 24px;
}

.section-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  border-left: 4px solid #1e62ec;
  padding-left: 8px;
}

.description-content {
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  line-height: 1.6;
  color: #606266;
}

.description-content p {
  margin: 0;
}

.action-buttons {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.loading-container {
  padding: 20px 0;
}

.error-container {
  text-align: center;
  padding: 40px 0;
}

.total-days {
  color: #8c8c8c;
  font-size: 12px;
  margin-left: 4px;
}

:deep(.el-descriptions) {
  margin-top: 8px;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
  width: 100px;
}

:deep(.el-descriptions__content) {
  color: #606266;
}
</style>
